<template>
  <div class="container">
    <el-dialog
      title="题目预览"
      :visible="showRoleDialog"
      :close-on-click-modal="false"
      @close="show"
      width="60%"
      @open="detaillist"
    >
      <el-descriptions
        :column="4"
        :colon="colon"
        v-model="listdata"
      >
        <el-descriptions-item label="【题型】：">{{
          listdata.questionType
        }}</el-descriptions-item>
        <el-descriptions-item label="【编号】：">{{
          listdata.id
        }}</el-descriptions-item>
        <el-descriptions-item label="【难度】：">{{
          listdata.difficulty
        }}</el-descriptions-item>
        <el-descriptions-item label="【标签】：">{{
          listdata.tags
        }}</el-descriptions-item>
        <el-descriptions-item label="【学科】：">
          {{ listdata.subjectName }}</el-descriptions-item
        >
        <el-descriptions-item label="【目录】：">{{
          listdata.directoryName
        }}</el-descriptions-item>
        <el-descriptions-item label="【方向】：">{{
          listdata.direction
        }}</el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <p>【题干】：</p>
      <p v-html="listdata.question"></p>
      <div ref="type">
        <span>{{listdata.questionType}}题 选项：（以下选中的选项为正确答案）</span>
      <p v-for="item in options" :key="item.id"><el-checkbox v-model="item.isRight">{{item.title}}</el-checkbox></p>
      </div>
      <el-divider></el-divider>
      <span>【参考答案】：</span>
      <el-button
        @click="playvideo"
        style="background: rgb(212, 69, 69); color: black"
        >视频答案预览</el-button
      >
      <div style="display: none" ref="video">
        <video
          width="60%"
          height="280px"
          :src="listdata.videoURL"
          controls="controls"
        ></video>
      </div>
      <el-divider></el-divider>
      <p>【答案解析】：
        <span v-html="listdata.answer"></span>
      </p>
      <el-divider></el-divider>
      <p>【题目备注】：{{ listdata.remarks }}</p>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="show">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { detail as details } from '@/api/hmmm/questions'
export default {
  props: {
    showRoleDialog: {
      type: Boolean,
      default: false
    },
    userId: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      minioBaseUrl: '',
      videoVisible: false,
      colon: false,
      listdata: {},
      options: []
      // isRight: false
    }
  },

  methods: {
    /**
     * 点击视频按钮时video显示
     */
    playvideo () {
      this.$refs.video.style.display = 'block'
    },
    /**
     * 点击x号关闭弹窗
     */
    show () {
      this.$emit('update:showRoleDialog', false)
      this.$refs.video.style.display = 'none'
    },
    /**
     * 预览的回填数据
     */
    async detaillist () {
      const { data } = await details({ id: this.userId })
      this.listdata = data
      // console.log(data)
      // console.log(this.listdata)
      // console.log(this.listdata.questionType)
      // 题型数据处理
      if (this.listdata.questionType === '1') {
        this.listdata.questionType = '单选'
      } else if (this.listdata.questionType === '2') {
        this.listdata.questionType = '多选'
      } else {
        this.listdata.questionType = '简单'
        this.$refs.type.style.display = 'none'
      }
      // 难度数据处理
      if (this.listdata.difficulty === '1') {
        this.listdata.difficulty = '简单'
      } else if (this.listdata.difficulty === '2') {
        this.listdata.difficulty = '一般'
      } else {
        this.listdata.difficulty = '困难'
      }
      this.options = data.options
      // console.log(this.options)
      this.options.forEach(item => {
        // 把单选或多选的标志改成true或false
        if (item.isRight === 0) {
          item.isRight = false
        } else {
          item.isRight = true
        }
      })
    }
  }
}
</script>

<style scoped lang='less'>
</style>
